<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hugo Blog Management</title>
</head>
<body>
    <h1>Hugo Blog Management</h1>

    <h2>Create New Post</h2>
    <form id="newPostForm">
        <label for="contentName">Content Name:</label>
        <input type="text" id="contentName" name="contentName" required>
        <button type="submit">Create</button>
    </form>

    <h2>Post Content</h2>
    <pre id="postContent"></pre>

    <h2>Update Post</h2>
    <form id="updatePostForm">
        <label for="filePath">File Path:</label>
        <input type="text" id="filePath" name="filePath" required>
        <br>
        <label for="content">Content:</label>
        <textarea id="content" name="content" rows="10" cols="50" required></textarea>
        <br>
        <button type="submit">Update</button>
    </form>

    <h2>Build and Deploy</h2>
    <button id="buildButton">Build and Deploy</button>

    <script>
        document.getElementById('newPostForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const contentName = document.getElementById('contentName').value;
            fetch('/hugo/new', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ contentName: contentName })
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('postContent').textContent = data.content;
            });
        });

        document.getElementById('updatePostForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const filePath = document.getElementById('filePath').value;
            const content = document.getElementById('content').value;
            fetch('/hugo/update', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ filePath: filePath, content: content })
            })
            .then(response => {
                if (response.ok) {
                    alert('File updated successfully');
                }
            });
        });

        document.getElementById('buildButton').addEventListener('click', function() {
            fetch('/hugo/build', {
                method: 'POST'
            })
            .then(response => {
                if (response.ok) {
                    alert('Site built and deployed successfully');
                }
            });
        });
    </script>
</body>
</html>
